<template>
    <div>
        <el-dialog :visible.sync="value" fullscreen>
            <el-card shadow="never" style="border:0rem"  v-if="examData.singleList && examData.singleList.length > 0">
                <template slot="header">
                    <strong style="font-size:25px;color:#C0C4CC">单选题</strong>
                    <span style="font-size:15px;color:#C0C4CC">({{examData.singleList.length}}道)</span>
                </template>

                <el-timeline>
                    <el-timeline-item :timestamp="'第' + (index + 1) +'道单选题'"  placement="top" v-for="(single,index) in examData.singleList" :key="single.id">
                        <el-card style="margin: 30px;border: 0px;background-color: lightgoldenrodyellow;" shadow="hover">
                            <div>
                                <h3 style="margin:0px 0px 20px 0px;display : inline-block" v-html="single.singleContent"></h3>
                            </div>

                            <el-radio-group v-model="singleAskList[index]">
                                <el-radio label="1" style="margin:0px 0px 10px 0px" disabled>A: {{single.singleOptionA}}</el-radio><br/>
                                <el-radio label="2" style="margin:0px 0px 10px 0px" disabled>B: {{single.singleOptionB}}</el-radio><br/>
                                <el-radio label="3" style="margin:0px 0px 10px 0px" disabled>C: {{single.singleOptionC}}</el-radio><br/>
                                <el-radio label="4" style="margin:0px 0px 10px 0px" disabled>D: {{single.singleOptionD}}</el-radio><br/>
                            </el-radio-group>

                            <div>
                                <el-tag type="danger" style="margin-top: 10px;">正确答案 : {{format_single(single.singleAsk)}}</el-tag>
                            </div>

                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-card>

            <el-card shadow="never" style="border:0rem"  v-if="examData.selectionList && examData.selectionList.length > 0">
                <template slot="header">
                    <strong style="font-size:25px;color:#C0C4CC;">多选题</strong>
                    <strong style="font-size:15px;color:#C0C4CC">({{examData.selectionList.length}}道)</strong>
                </template>


                <el-timeline>
                    <el-timeline-item :timestamp="'第' + (index + 1) +'道多选题'" placement="top" v-for="(selection,index) in examData.selectionList" :key="selection.id">
                        <el-card style="margin: 30px;border: 0px;background-color: lightgoldenrodyellow;" shadow="hover">
                            <div>
                                <h3 style="margin:0px 0px 20px 0px;display : inline-block" v-html="selection.selectionContent"></h3>
                            </div>


                            <CheckboxGroup v-model="checkboxAskList[index]">
                                <Checkbox label="1" style="margin:0px 0px 10px 0px" disabled>
                                    <span>A. {{selection.selectionOptionA}}</span>
                                </Checkbox><br/>
                                <Checkbox label="2" style="margin:0px 0px 10px 0px" disabled>
                                    <span>B. {{selection.selectionOptionB}}</span>
                                </Checkbox><br/>
                                <Checkbox label="3" style="margin:0px 0px 10px 0px" disabled>
                                    <span>C. {{selection.selectionOptionC}}</span>
                                </Checkbox><br/>
                                <Checkbox label="4" style="margin:0px 0px 10px 0px" disabled>
                                    <span>D. {{selection.selectionOptionD}}</span>
                                </Checkbox><br/>
                            </CheckboxGroup>

                            <div>
                                <el-tag type="danger" style="margin-top: 10px;">正确答案 : {{format_selection(selection.selectionAsk)}}</el-tag>
                            </div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-card>


            <el-card shadow="never" style="border:0rem"  v-if="examData.askList && examData.askList.length > 0">
                <template slot="header">
                    <strong style="font-size:25px;color:#C0C4CC;">问答题</strong>
                    <strong style="font-size:15px;color:#C0C4CC">({{examData.askList.length}}道)</strong>
                </template>

                <el-timeline>
                    <el-timeline-item :timestamp="'第' + (index + 1) +'道问答题'" placement="top" v-for="(ask,index) in examData.askList" :key="ask.id">
                        <el-card style="margin: 30px;border: 0px;background-color: lightgoldenrodyellow;" shadow="hover">
                            <div>
                                <h2 style="margin:0px 0px 20px 0px;display : inline-block" v-html="ask.askContent"></h2>
                            </div>
                            <div>
                                <font style="color:green">试题解析: {{ask.askAnalysis}}</font>
                            </div>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>

                <el-card shadow="never" style="border:0rem"  v-if="examData.upperList && examData.upperList.length > 0">
                    <template slot="header">
                        <strong style="font-size:25px;color:#C0C4CC;">上机题</strong>
                        <strong style="font-size:15px;color:#C0C4CC">({{examData.upperList.length}}道)</strong>
                    </template>

                    <el-timeline>
                        <el-timeline-item :timestamp="'第' + (index + 1) +'道上机题'" placement="top" v-for="(upper,index) in examData.upperList" :key="upper.id">
                            <el-card style="border: 0px;margin: 30px;background-color: lightgoldenrodyellow;" shadow="hover">
                                <div>
                                    <h2 style="margin:0px 0px 20px 0px;display : inline-block" v-html="upper.upperContent"></h2>
                                </div>
                                <div>
                                    <el-link style="margin-top: 10px;" type="danger" :href="upper.upperUrl">下载素材</el-link>
                                </div>
                            </el-card>
                        </el-timeline-item>
                    </el-timeline>
                </el-card>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>

    import { explainExam } from "@/api/academic/exam";

    export default {
        name: "student-exam-explain",
        data(){
            return {
                value : false,
                parentData:{},
                examData:{},
                singleAskList:[],
                checkboxAskList:[]
            }
        },
        watch:{
            value(data){
                if(data){
                    explainExam(this.parentData).then(res=>{
                        if(res.data.success){
                            this.examData = res.data.data;
                        }
                    });
                }
            }
        },
        methods:{
            format_selection(data){ //处理多选题答案的工具方法
                let array = [];

                if(data.includes("1")){ //1,3 A,C  1,2,3   2,3,4  2,4  A,B,C
                    array.push("A");
                }
                if(data.includes("2")){
                    array.push("B");
                }
                if(data.includes("3")){
                    array.push("C");
                }
                if(data.includes("4")){
                    array.push("D");
                }

                return array.join(",");
            },
            format_single(data){
                switch (data) {
                    case '1':
                        return "A";
                    case "2":
                        return "B";
                    case "3":
                        return "C";
                    case "4":
                        return "D";
                }
            }
        }
    }
</script>

<style scoped>

</style>